<template>
	<scroll-view scroll-y="true" class="main">
		<template v-for="(item) in list">
			<skill-box :item="item"  @detail="detail"></skill-box>
		</template>
		
		<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
				</u-empty>
	</scroll-view>
</template>

<script>
	import skillBox from '@/components/skillBox/skillBox.vue'
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components:{
			skillBox,
		},
		data() {
			return {
				page: 1,
				finish: false,
				list: [],
				location: ''
			}
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			...mapActions(['getLocation']),
			async getInfo() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = JSON.parse(JSON.stringify(this.$store.state.location))
				this.reload()
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages_technician/jsDetails/jsDetails?id='+id
				});
			},
			reload() {
				this.page = 1
				this.list = []
				this.finish = false
				this.getList()
			},
			more() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				this.$api.post('/collectlist', {
					...this.location,
					page: this.page,
				}).then(res => {
					if (res.code == 1) {
						res.data = res.data.map(value => {
							value = value.serviceinfo
							return value
						})
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
					
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
page{
	background: #F7F7FA;
}
.main{
	height: 100vh;
	overflow: hidden;
}
</style>
